<head>
  <title>Team Spark</title>
  <link rel="icon" type="image/png" href="/favicon.png" />
</head>

<body>
<div class="container-fluid">
  {{>content}}
</div>
</body>

<template name="content">
  {{#if loggedIn }}
    <div class="row-fluid stretch">
    {{#if configureTeam}}
      {{>createTeam}}
    {{else}}
      {{#if isOrphan}}
      <div class="overlay"><h1>Please wait for permissions from your administrator</h1></div>
      {{else}}

      <div class="span2 project-panel stretch sidebar-nav attraction">
        {{>projects}}
      </div>

      <div class="span7 spark-panel stretch">
        <header>
          <h4>
            <img src="/favicon.png" />
            {{teamName}}
            {{>notifications}}
            <div class="btn-group pull-right" id="user-settings">
              {{# if ts.isStaff ts.currentTeam }}
              <a class="btn btn-info btn-small" id="manage-member" title="Manage team members"><i class="icon-plus"></i></a>
              {{/if}}
              <a class="btn btn-info btn-small hide" id="edit-profile" title="Edit personal information"><i class="icon-cogs"></i></a>
              <a class="btn btn-info btn-small" id="logout" title="Sign out"><i class="icon-signout"></i></a>

            </div>
          </h4>
        </header>
        {{>sparkFilter}}
        {{>sparkInput}}
        {{>sparkEdit}}
        {{#if showSingleSpark}}
          <div class="sparks">
            {{#with singleSpark}}
            {{>spark}}
            {{/with}}
          </div>
        {{else}}
          {{> sparks}}
        {{/if}}
        <div class="toolbar-bottom" style="visibility: hidden; display: none;">
          <div class="btn-group" id="filter-type" data-toggle="buttons-radio">
            <button class="btn {{ showSparks }}" id="spark-board" title="Task Wall"><i class="icon-tasks"></i>Task Wall</button>
            <button class="btn {{ showSchedule }}" id="schedule-board" title="Schedule"><i class="icon-calendar"></i>Schedule</button>
            <button class="btn {{ showCharts }}" id="chart-board" title="Statistics"><i class="icon-dashboard"></i>Statistics</button>

          </div>
        </div>
      </div>


      <div class="span3 activity-panel stretch attraction">
        {{> activities}}
      </div>
      {{/if}}

      </div>
      {{>memberDialog}}
    {{/if}}
  {{else}}
    {{loginButtons}}
  {{/if}}
</template>

<template name="sparkFilter">
  <div class="navbar spark-controls">
    <div class="navbar-inner">
      <div class="container">
        <div class="nav-collapse collapse">
          <ul class="nav spark-list">
            <li>
              <input type="text" id="search-spark" style="width:420px;">
            </li>
          </ul>
          <ul class="nav pull-right">
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-filter"></i>Filter <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a class="shortcut" href="#" data-id="upcoming" data-name="Upcoming"><i class="icon-time" style="color:#d14;"></i>Upcoming</a></li>
                <li><a class="shortcut" href="#" data-id="created" data-name="Created by myself"><i class="icon-user" style="color:#228b22;"></i>Created by myself</a></li>
                <li><a class="shortcut" href="#" data-id="finished" data-name="Finished by myself"><i class="icon-ok" style="color:#000080;"></i>Finished by myself</a></li>
                <li class="divider"></li>
                <li><a href="#"><i class="icon-ok-circle"></i>Finished: <span id="filter-finished">{{finishText}}</span></a></li>
                <li><a href="#"><i class="icon-arrow-up"></i>Priority: <span id="filter-priority">{{priorityText}}</span></a></li>
                <li><a href="#"><i class="icon-time"></i>Deadline: <span id="filter-deadline">{{deadlineText}}</span></a></li>
                <li><a href="#"><i class="icon-list-ul"></i>Type: <span id="filter-spark-type">{{typeText}}</span></a></li>
                <li><a href="#"><i class="icon-user"></i>Author: <span id="filter-author">{{authorText}}</span></a></li>
                <li><a href="#"><i class="icon-user"></i>Responsible: <span id="filter-owner">{{ownerText}}</span></a></li>
                <li><a href="#"><i class="icon-tag"></i>Tag: <span id="filter-tag">{{tagText}}</span></a></li>
                <li class="divider"></li>
                <li><a href="#" id="clear-filter"><i class="icon-ban-circle"></i>Clear Filters</a></li>
              </ul>
            </li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-sort"></i>Sort by: {{orderText}} <b class="caret"></b></a>
              <ul class="dropdown-menu" id="spark-sort">
                <li><a href="#" data-id="createdAt" data-name="Created"><i class="icon-time"></i>Created</a></li>
                <li><a href="#" data-id="updatedAt" data-name="Updated"><i class="icon-time" style="color:#0044aa;"></i>Updated</a></li>
                <li><a href="#" data-id="deadline" data-name="Expiring"><i class="icon-time" style="color:#d14;"></i>Expiring</a></li>
                <li><a href="#" data-id="priority" data-name="Priority"><i class="icon-arrow-up"></i>Priority</a></li>
                <li><a href="#" data-id="totalSupporters" data-name="Supporters"><i class="icon-thumbs-up"></i>Supporters</a></li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<template name="notifications">
  {{#if hasUnread}}
  <div class="nav-collapse collapse notification-list" style="display: inline-block; margin:0px;">
    <ul class="nav">
      <li class="{{hasUnread}}">
        <a href="#" class="user-notification" title="通知">
          <span class="bubble badge badge-important" style="font-size: 16px;">{{totalUnread}}</span>
        </a>

        <ul class="dropdown-menu">
          {{#each topNotifications}}
          <li class="notification">
            <a href="#">{{title}}</a>
          </li>
          {{showNotification}}
          {{/each}}
        </ul>
      </li>
    </ul>
  </div>
  {{/if}}

</template>

<template name="createTeam">
  <div id="create-team-form" style="display: none;">
    <h1>Create Team</h1>

      <div>
        <label for="teamname">
          Team Name:
        </label>
        <input id="teamname" type="text">
      </div>
      <div>
        <input type="button" class="btn" id="btn-create-team" value="Create" />
      </div>

  </div>
</template>